﻿ <!DOCTYPE html>
 <html xmlns='http://www.w3.org/1999/xhtml'> 
 <head> 
 <title>WIZ550web</title> 
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> 
 <meta http-equiv='pragma' content='no-cache' /> 
 <meta http-equiv='content-type' content='no-cache, must-revalidate' />  
 <style> 
 body{background-color:transparent;} 
 body,h3,p,div{margin:0;padding:0;font: normal 14px 'omnes-pro', Helvetica, Arial, sans-serif;} 
 #header {
	position: relative;	
	margin: auto;
 }
 #header a {
	margin-left: 30px;						
 }
 #header h2 {	
	vertical-align: middle;	
	font-size: 42px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	margin-left: 30px;
	text-align: left;
 } 
 .usual { 
	 background:transparent; 
	 color:#111;	 
	 padding:15px 20px; 
	 width:auto; 	 
	 margin:8px auto; 
 } 
 .usual li {list-style:none; float:left;} 
 .usual ul a { 
	 display:block; 
	 padding:6px 10px; 
	 text-decoration:none!important; 
	 margin:1px; 
	 margin-left:0; 	 
	 font-weight:bold; 
	 color:#FFF; 
	 background:#aaa;	 
 } 
 .usual ul a:hover { 	 
	 color:#111; 	 
	 background:#EEF3FF;
 } 
 .usual ul a.selected { 
	 margin-bottom:0; 
	 color:#000; 	 
	 background:#EEF3FF;
	 border-bottom:1px solid snow; 
	 cursor:default; 
 }  
 .usual div{ 
	 padding: 10px 10px 8px 10px; 
	 *padding-top:3px; 	 
	 *margin-top:15px;
	 clear:left; 	 
	 background:#EEF3FF;	 
 }  
 .usual div a {color:#000; font-weight:bold;} 
 .hide{display:none;} 
 .show{display:block;} 
 .mr5{margin-right:5px;} 
 .red{color:red}  
 .usual div h3{margin-top:10px;margin-left:10px;font-size:24px;text-decoration:none;font-weight:bold;color:blue;}
 .usual div p{margin-top:0;margin-bottom:10px;} 
 .ipt label{float:left;padding-top:3px;text-align:left;width:130px;} 
 .pwd label{float:left;margin-left:-5px;padding-top:3px;text-align:left;width:160px;}   
 .di-led{margin-top:2px;margin-right:10px;margin:5px auto;border:0px dashed #ccc;height:28px;width:28px;display:block;} 
 .di-on{background-image: url(img/di_on.png);} 
 .dio-on{background-image: url(img/dio_on.png);} 
 .di-off{background-image: url(img/di_off.png);}
 .d-no-use{background-image: url(img/notused.png);} 
 .do-led{margin-top:2px;margin-right:20px;margin:5px auto;border:0px dashed #ccc;height:33px;width:96px;display:block;}
 .do-on{background-image: url(img/do_on.png);} 
 .do-off{background-image: url(img/do_off.png);} 
 .io-dir{margin-top:5px;margin-bottom:5px;text-align:center;font-weight:bold;} 
 .onboard-led{margin-top:2px;margin-right:10px;margin:5px auto;border:0px dashed #ccc;height:28px;width:28px;display:block;} 
 .led-on{background-image: url(img/di_on.png);} 
 .led-off{background-image: url(img/di_off.png);}
 .div-analog{margin-left:30px; padding:0px;} 
 .analog{margin-top:2px;margin-right:10px;border:1px solid #ccc;height:20px;width:500px;display:block;} 
 .io ul{margin-top:5px;margin-bottom:90px;} 
 .io li{margin-left:10px;margin-right:10px;list-style:none; float:left; text-align:center;}
 .pointer{cursor:pointer;} 
 .ain{width:0%;height:100%;text-align:center;background:red;float:left;display:block;} 
 .conf-menu span {float:left;}
 .conf-menu label{float:left; padding-top:3px; text-align:center; vertical-align:middle; width:70px;}
 .conf-menu ul{margin-top:5px;margin-bottom:600px;} 
 .conf-menu li{padding-left:20px;padding-right:20px;list-style:none; float:left; text-align:center; font-weight:bold; clear:both} 
  
 .info label{float:left;text-align:left;width:100px;} 
 .info li{text-align:center;clear:both}
 .info span{vertical-align:middle;float:left;text-align:left;display:block;padding:0px;border:0px;margin:0px;}
 .info div{margin:0 auto;text-align:center;display:table-cell;vertical-align:middle;padding:0px 15px 10px 0px;background:#FFE4E1;}
 
 a.tooltip {outline:none; }
 a.tooltip strong {line-height:30px;}
 a.tooltip:hover {text-decoration:none;} 
 a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:150px; line-height:16px;
 }
 a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
 .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
 /* CSS3 extras */
 a.tooltip span
 {
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
 }
 
 /* CSS for Buttons */
.btn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px; 
	color: #ffffff;	
	font-size: 13px;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
}

.btn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	cursor: pointer;
	text-decoration: none;
}

.width-onoff{
    width: 60px;
    display: inline-block;
}

.btn-on {
	background: #3498db;
}

.btn-off {
	background: #C0C0C0;
}

 </style> 
 <script> 
 var tabLinks=new Array(); 
 var divContents=new Array(); 
 var t_update;  
 var timer_is_on=0; 
 var t_update_adc;
 var adctimer_is_on=0;
 var t_get_rs232; 
 var rs232_timer_on=0;  
 var adc0_val = 1024;
 var tmp_adc0_val;
 
 function init() 
 { 
	 var tabListItems=document.getElementById('tabs').childNodes; 
	 for(var i=0;i<tabListItems.length-1;i++) 
	 { 
	 	if(tabListItems[i].nodeName=='LI') 
		 { 
			 var tabLink=getFirstChildWithTagName(tabListItems[i],'A'); 
			 var id=getHash(tabLink.getAttribute('tabid')); 
			 tabLinks[id]=tabLink; 
			 divContents[id]=document.getElementById(id); 
		 } 
	 } 
	 var i=0; 
	 for(var id in tabLinks) 
	 { 
		 tabLinks[id].onclick=showTab; 
		 if(i==0){tabLinks[id].className='selected';} 
		 i++; 
	 } 
 }; 
 
 function showTab() 
 { 
	 var selectedId=getHash(this.getAttribute('tabid')); 
	 for(var id in divContents) 
	 { 
	 	if(id==selectedId) 
		 { 
			 tabLinks[id].className='selected'; 
			 if(id)divContents[id].className='show'; 
			 if(selectedId=='tabs2'){doUpdate();}else{stopUpdate();} 
			 if(selectedId=='tabs3'){doADCUpdate();}else{stopADCUpdate();}
			 if(selectedId=='tabs4'){updateIOAlias();}else{;}			 
			 if(selectedId=='tabs5'){doGetRs232Data();}else{stopGetRs232Data();} 
		 } 
		 else 
		 { 
			 tabLinks[id].className=''; 
			 if(id)divContents[id].className='hide'; 
		 } 
	 } 
	 return false; 
 }; 
 
 function getFirstChildWithTagName(element,tagName) 
 { 
	 for(var i=0; i<element.childNodes.length;i++) 
	 { 
		 if(element.childNodes[i].nodeName==tagName) return element.childNodes[i]; 
	 } 
 }; 
 
 function getHash(url) 
 { 
	 var hashPos=url.lastIndexOf('#'); 
	 return url.substring(hashPos+1); 
 }; 

 function AJAX(url, callback)
 { 
	 var req = AJAX_init(); 
	 req.onreadystatechange = AJAX_processRequest; 
	 
	 function AJAX_init() { 
		 if (window.XMLHttpRequest) { 
		 	return new XMLHttpRequest(); 
		 } else if (window.ActiveXObject) { 
		 	return new ActiveXObject('Microsoft.XMLHTTP'); 
		 } 
	 };
	  
	 function AJAX_processRequest() { 
		 if(req.readyState == 4) { 
		 	if(req.status == 200) { 
		 	if(callback) 
		 		callback(req.responseText); 
		 	} 
		 } 
	 }; 
	 
	 this.doGet = function() { 
		 req.open('GET', url, true); 
		 req.send(null); 
	 };
	  
	 this.doPost = function(body) { 
		 req.open('POST', url, true); 
		 req.setRequestHeader('Content-Type', 
		 'application/x-www-form-urlencoded'); 
		 req.setRequestHeader('ISAJAX','yes'); 
		 req.send(body); 
	 }; 
 }; 
 
 function $(id){return document.getElementById(id);} 
 
 function $$(id){return document.getElementsByName(id);} 
 
 function $$_ie(tag, name){ 
	 if(!tag){tag='*';}	  
	 var elems=document.getElementsByTagName(tag); 
	 var res=[]; 
	 for(var i=0;i<elems.length;i++){ 
		 att=elems[i].getAttribute('name'); 
		 if(att==name){ 
		 	res.push(elems[i]); 
		 } 
	 } 
	 return res; 
 } 
 
 function selset(id,val){
 	var o=$(id);
 	for(var i=0;i<o.options.length;i++){
 		if(i==val){
 			o.options[i].selected=true;
 			break;
 		}
 	}
 }
  
 function selset_name(name, val){
 	var o=$$(name);
 	for(var i=0;i<o.options.length;i++){
 		if(i==val){
 			o.options[i].selected=true;
 			break;
 		}
 	}
 }
 
 function BasicSettingCallback(o){ 
	 var obj;
	 $('txtFwver').value=o.ver;
	 $('txtDname').value=o.dname;
	 $('txtPcode').value=o.pcode; 
	 $('txtMac').value=o.mac;
	 $('txtLip').value=o.lip;	 
	 $('txtGw').value=o.gw;
	 $('txtSub').value=o.sub;
	 $('txtDns').value=o.dns; 	 
	 if(typeof(window.external)!='undefined'){
	 	obj=$$_ie('input','dhcp');
	 }else{
	 	obj=$$('dhcp');
	 }
	 for(var i=0; i<obj.length;i++){
	 	if(i==o.dhcp){
	 		obj[i].checked=true;	 		
	 		break;
	 	}
	 }	 
	 netinfo_block(i);
	 	 
	 selset('selBaud1',o.baud1);
	 selset('selDb1',o.databit1);
	 selset('selParity1',o.parity1);
	 selset('selStop1',o.stopbit1);
	 selset('selFlow1',o.flow1);
	 
	 selset('selBaud2',o.baud2);
	 selset('selDb2',o.databit2);
	 selset('selParity2',o.parity2);
	 selset('selStop2',o.stopbit2);
	 selset('selFlow2',o.flow2);
 } 
 
 function netinfo_block(o) {
 	if(o == 1) { 	// Using DHCP setting, Netinfo inputbox blocked
		$('txtLip').disabled=true;	 
		$('txtGw').disabled=true;
		$('txtSub').disabled=true;
		$('txtDns').disabled=true;
 	} else {			// Static setting, Netinfo inputbox unblocked
 		$('txtLip').disabled=false;	 
		$('txtGw').disabled=false;
		$('txtSub').disabled=false;
		$('txtDns').disabled=false;
 	} 	
 }
 
 var dout; 
 var dout_timer=false;

 function postdata(o){ 
	 var p=o.attributes['pin'].value; 	 
	 var v = 0;	 
	 if(o.className=='btn btn-on width-onoff'){v='1';}else{v='0';}	 
	 dout_timer=setTimeout(function(){ 
		 if(dout && dout.abort){dout.abort();} 
		 dout=new AJAX('dout.cgi', function(t){ 
		 	try{
		 		eval(t);		 		
		 		if(t=='1'){		 			
		 			o.setAttribute('class','btn btn-on width-onoff');
		 		} else {		 			
		 			o.setAttribute('class','btn btn-off width-onoff');
		 		}		 		
		 	}catch(e){alert(e);} 
		 }); 
		 dout.doPost('pin='+p+'&val='+v); 
	 },300); 
 } 
 
 function IoStatusCallback(o){ 
	 var i; 
	 var odout;	 
	 var odin; 
	 var odir;
	 var oled;
	 var oledset;
	 var odoutBtn;
	 if(typeof(window.external)!='undefined'){ 
		 odout=$$_ie('span','dout');		  
		 odin=$$_ie('span','din'); 	
		 odir=$$_ie('span','iodir');
		 oled=$$_ie('span','led');		 
		 oledset=$$_ie('button','ledset-btn');
		 odoutBtn=$$_ie('button','dout-btn');
	 }else{
		 odout=$$('dout');		 
		 odin=$$('din');
		 odir=$$('iodir');
		 oled=$$('led');
		 oledset=$$('ledset-btn');
		 odoutBtn=$$('dout-btn');
	 }
	 
	 // Configurable GPIOs
	 for(i=0;i<odout.length;i++){ 
		 if (o['dout'][i]['v']=='2') { 	// IO direction: Output
		 	odoutBtn[i].style.visibility='visible';
		 	if(o['din'][i]['v']=='0') {		 		
		 		odoutBtn[i].setAttribute('class','btn btn-off width-onoff');
		 		odoutBtn[i].textContent='ON';
		 	} else {		 		
		 		odoutBtn[i].setAttribute('class','btn btn-on width-onoff');
		 		odoutBtn[i].textContent='OFF';
		 	}		 	
		 	odir[i].textContent='Output'; //ok		 	
		 } else if(o['dout'][i]['v']=='1') { // IO direction: Input, IO Setting button hide 		 	
		 	odoutBtn[i].style.visibility='hidden';
		 	odir[i].textContent='Input';
		 } else { 							// IO direction: NotUsed, IO Setting button hide		 	
		 	odoutBtn[i].style.visibility='hidden';
		 	odir[i].textContent='NotUsed';
		 } 
		 		 
		 if(o['din'][i]['v']=='0') 
		 { 
		 	odin[i].className='di-led di-off'; 		// off
		 }else{ 		 	
		 	if (o['dout'][i]['v']=='2') {
		 		odin[i].className='di-led dio-on'; // Dir-Output on: Blue led
		 	} else {		 		
		 		odin[i].className='di-led di-on'; // Dir-input on: Green led
		 	}
		 } 
	 }	 
	 // On-board LED
	 for(i=0;i<oled.length;i++){ 
		if (o['led'][i]['v']=='0') {
			oled[i].className='onboard-led led-on';
			oledset[i].setAttribute('class','btn btn-on width-onoff');
			oledset[i].textContent='OFF';
		} else {
			oled[i].className='onboard-led led-off';
			oledset[i].setAttribute('class','btn btn-off width-onoff');
			oledset[i].textContent='ON';
		}
	 }  
 } 
  
 function updateIO(){ 
	 var oUpdate; 
	 setTimeout(function(){
	 	oUpdate=new AJAX('io.cgi',function(t){
	 		try{eval(t);}catch(e){location.href='/';}
	 });	 	 
	 oUpdate.doGet();},300);
	 t_update=setTimeout('updateIO()',800); 
 } 
 
 function doUpdate(){ 
	 if(!timer_is_on) 
	 { 
		 timer_is_on=1; 
		 updateIO(); 
	 } 
 } 
 
 function stopUpdate(){ 
	 clearTimeout(t_update); 
	 timer_is_on=0; 
 }
 
 
 function updateIOAlias(){ 	 
	 var oUpdate; 
	 setTimeout(function(){
	 	oUpdate=new AJAX('io_alias.cgi', function(t){ 
		 	try{eval(t);}catch(e){alert(e);} 
		});
	 	oUpdate.doGet();
	 },300);  
 }
 
  function IoAliasStatusCallback(o){ 
	 var i; 
	 var odstate; 	 
	 var odir;
	 var oalias;	 
	 if(typeof(window.external)!='undefined'){ 
		 odstate=$$_ie('span','dstate'); 
		 odir=$$_ie('select','dir'); 	
	 	 oalias=$$_ie('input','alias');	
	 }else{
		 odstate=$$('dstate');
		 odir=$$('dir');
		 oalias=$$('alias');		 
	 }	 
	 
	 for(i=0;i<odstate.length;i++){ 		 
		if(o['dir'][i]['v']=='2') {			// IO Direction: Output 
			if(o['dstate'][i]['v']=='0') {
				odstate[i].className='di-led di-off';// LED off
			} else {
				odstate[i].className='di-led dio-on'; // Out: Blue LED
			}
		} else if(o['dir'][i]['v']=='1') { 	// IO Direction: Input
			if(o['dstate'][i]['v']=='0') {
				odstate[i].className='di-led di-off';// LED off
			} else {
				odstate[i].className='di-led di-on'; // In: Green LED
			}
		} else {							// IO not used
			odstate[i].className='di-led d-no-use';
		}
		 
		for(var j=0;j<odir[i].options.length;j++){	// Select
			if(j==o['dir'][i]['v']){
				odir[i].options[j].selected=true;
				break;
			}
		}			 
		oalias[i].value = o['alias'][i]['a'];	// Alias			
	 }	
 }  
 
 function save_alias(o){ 
	 var p=o.attributes['pin'].value; 	 
	 var str=$('txtAlias_d'+p).value;	 
	 setTimeout(function(){ 		 
		 dout=new AJAX('save_alias.cgi', function(t){ 
		 	try{eval(t);}catch(e){alert(e);} 
		 }); 
		 dout.doPost('pin='+p+'&val='+str); 
		 alert('Alias for D'+p+' changed.');
	 },300); 	 	 
	 setTimeout('updateIOAlias()',800*1);
 } 
 
 function dir_change(o){
 	 var p=o.attributes['pin'].value;
 	 var v=o.value;
 	 setTimeout(function(){ 		 
		 dout=new AJAX('dir_change.cgi', function(t){ 
		 	try{eval(t);}catch(e){alert(e);} 
		 }); 
		 dout.doPost('pin='+p+'&dir='+v); 		 
	 },300);
	 setTimeout('updateIOAlias()',800*1);
 }
 
 function io_status_factory_reset(){ 
 	var v=1;	 
	if(confirm('Factory Reset: IO Direction / Status / Alias?'))
	{
		 setTimeout(function(){ 		 
			 dout=new AJAX('set_default_io_status.cgi', function(t){ 
			 	try{eval(t);}catch(e){alert(e);} 
			 }); 
			 dout.doPost('io_reset='+v); 			 
		 },300); 	 	 
		 setTimeout('updateIOAlias()',1500*1);
	}
 }
 
 function ADCStatusCallback(o){
 	var i;
 	var oAin;
 	var oAinval; 
	if(typeof(window.external)!='undefined'){ 	
		oAin=$$_ie('strong','ain');
		oAinval=$$_ie('span','ainval');
	}else{		 
		oAin=$$('ain');
		oAinval=$$('ainval');
	}
	
	for(i=0;i<oAin.length;i++){ 
		oAin[i].style.width=o['ain'][i]['v']*500/5095+'px'; // 0~4095 + margin
		oAinval[i].textContent = o['ain'][i]['v'];	
	} 
 }
 
 function updateADC(){ 
	 var oUpdate; 
	 setTimeout(function(){
	 	oUpdate=new AJAX('adc.cgi',function(t){try{eval(t);
	 	}catch(e){location.href='/';}
	 });
	 
	 /*oUpdate.doPost('');},300);*/ 
	 oUpdate.doGet();},300);
	 t_update_adc=setTimeout('updateADC()',500); 
 } 
 
 function doADCUpdate(){ 
	 if(!adctimer_is_on) 
	 { 
		 adctimer_is_on=1; 
		 updateADC(); 
	 } 
 } 
 
 function stopADCUpdate(){ 
	 clearTimeout(t_update_adc); 
	 adctimer_is_on=0; 
 } 
 
 function getRs232Data(){ 
	 var oUpdate; 
	 setTimeout(function(){
	 	oUpdate=new AJAX('get_serial_data.cgi',function(t){try{eval(t);}catch(e){location.href='/';}}); 
	 	/*oUpdate.doPost('');*/
	 	oUpdate.doGet();
	 },300); 
	 
	 t_get_rs232=setTimeout('getRs232Data()',1000); 
 } 
 
 function doGetRs232Data(){ 
 	if(!rs232_timer_on){
 		rs232_timer_on=1;
 		getRs232Data();
 	} 
 } 
 
 function stopGetRs232Data(){ 
 	clearTimeout(t_get_rs232);
 	rs232_timer_on=0; 
 } 
 
 function getRs232DataCallback(o){ 
	 var obj=$('txtRx'); 
	 if(obj) obj.value=obj.value+o.data; 
 }
  
 function clear_textarea(){ 
	 var obj=$('txtRx'); 
	 if(obj)obj.value=''; 
 }
  
 function send_to_rs232(){ 
	 var obj=$('txtTx'); 
	 var tx_data; 
	 var post_serial_data; 
	 if(obj){ 
		 tx_data=$('txtTx').value; 
		 var len=tx_data.length; 
		 if(len>0){ 
			 var post_timer=setTimeout(function(){ 
				 post_serial_data=new AJAX('tx_serial_data.cgi', function(t){ 
				 	try{eval(t);}catch(e){alert(e);} 
				 }); 
				 post_serial_data.doPost('data='+tx_data);  
			 },300); 
		 } 
		 $('txtTx').value=''; // claer
	 } 
 } 
 
 function len_chk(o) {
 	var len = o.value.length;
 	if(len > 24) {
 		alert('Name/Alias up to 24 bytes can be entered'); 		
 		o.value = o.value.substring(0, 24);  		
 	}
 }
 
 function ip_chk(o) {
 	var len = o.value.length;
 	var pattern = /(^[0-9\.\b]+$)/; // Regular expression 	
 	if(!pattern.test(o.value)) {
 		alert('Allow only numbers and dot(.)'); 		
 		o.value = o.value.substring(0, (o.value.length-1)); 			
 	} 	
 	if(len > 15) {
 		o.value = o.value.substring(0, 15);  		
 	}
 }  
 </script> 
 
 <link rel='shortcut icon' type='image/x-icon' href='img/favicon.ico' />
 </head> 
 <body onload='init();'> 
 	 <div id='header'> 	 	 
		 <h2>WIZ550web Demopage</h2>			
	 </div>
	 <div class='usual'>		
		 <ul id='tabs'> 
			 <li><a href='#Settings' tabid='#tabs1' accesskey='1'>Device Settings</a></li> 
			 <li><a href='#IO' tabid='#tabs2' accesskey='2'>Digital I/O Status</a></li> 
			 <li><a href='#ADC' tabid='#tabs3' accesskey='3'>ADC Status</a></li> 
			 <li><a href='#IOCONFIG' tabid='#tabs4' accesskey='4'>I/O Configuration</a></li> 			 
			 <li><a href='#Serial' tabid='#tabs5' accesskey='5'>Serial Data</a></li> 			 
		 </ul>  
		 <div id='tabs1' class='show'> 
			 <form id='frmParam' method='post' action='config.cgi'> 
				 <h3>Device Information</h3> 
				 <div class='ipt'> 
					 <p><label>Firmware version:</label><input type='text' id='txtFwver' size='20' disabled='disabled' value='' /></p> 
					 <p>
					 	<label for='txtDname'>Device name:</label>
					 	<a href='#' class='tooltip'>
							<input type='text' size='20' id='txtDname' name='devicename' maxlength='25' value='' onkeyup='len_chk(this);' />
							<span> Up to 24 bytes </span>
						</a>
					 </p> 
					 <p><label>Product code: </label><input type='text' id='txtPcode' size='20' disabled='disabled' value='' /></p> 
					 <p><label>MAC address: </label><input type='text' id='txtMac' size='20' disabled='disabled' value='' /></p> 
				 </div> 
				 <h3>Network Configuration</h3> 
				 <div>					 
					 <input type='radio' name='dhcp' id='rdStatic' value='0' onclick='netinfo_block(this.value);' /><label for='rdStatic'>Static IP</label> 
					 <input type='radio' name='dhcp' id='rdDhcp' value='1' onclick='netinfo_block(this.value);' /><label for='rdDhcp'>DHCP</label> 
				 </div> 
				 <div class='ipt'> 					 
					 <p> 
					 <label for='txtSip'>Device IP address:</label><input id='txtLip' name='lip' type='text' size='20' value='' onkeyup='ip_chk(this);'/> 
					 </p> 
					 <p> 
					 <label for='txtGw'>Gateway:</label><input id='txtGw' name='gw' type='text' size='20' value='' onkeyup='ip_chk(this);'/> 
					 </p> 
					 <p> 
					 <label for='txtSub'>Subnet mask:</label><input id='txtSub' name='sub' type='text' size='20' value='' onkeyup='ip_chk(this);'/> 
					 </p> 
					 <p> 
					 <label for='txtDns'>DNS server:</label><input id='txtDns' name='dns' type='text' size='20' value='' onkeyup='ip_chk(this);'/> 
					 </p> 
				 </div> 
				 <h3>Serial Port - Data</h3> 
				 <div>				 	 
					 <label for='selBaud1'>USART1 Baudrate:</label> 
					 <select id='selBaud1' name='baudrate'> 						 
						 <option value='0'>600</option>
						 <option value='1'>1200</option>
						 <option value='2'>2400</option> 
						 <option value='3'>4800</option> 
						 <option value='4'>9600</option> 
						 <option value='5'>19200</option> 
						 <option value='6'>38400</option> 
						 <option value='7'>57600</option> 
						 <option value='8'>115200</option>
						 <option value='9'>230400</option>
					 </select> 
					 <label for='selDb1'>Data bit:</label> 
					 <select id='selDb1' name='databit'> 						 
						 <option>8</option>
						 <option>9</option>
					 </select> 
					 <label for='selParity1'>Parity:</label> 
					 <select id='selParity1' name='parity'> 
						 <option value='0'>NONE</option> 
						 <option value='1'>ODD</option> 
						 <option value='2'>EVEN</option> 
					 </select> 
					 <label for='selStop1'>Stop bit:</label> 
					 <select id='selStop1' name='stopbit'> 
					 	<option>1</option> 
					 	<option>2</option> 
					 </select> 
					 <label for='selFlow1'>Flow control:</label> 
					 <select id='selFlow1' name='flowcontrol'> 
						 <option value='0'>NONE</option> 
						 <option value='1'>CTS/RTS</option>
						 <option value='2'>RS-422</option> 
						 <option value='3'>RS-485</option>  
					 </select> 
				 </div>
				 <h3>Serial Port - AT command</h3> 
				 <div>				 	 
					 <label for='selBaud2'>USART2 Baudrate:</label> 
					 <select id='selBaud2' name='baudrate' disabled='disabled'> 
						 <option value='0'>600</option>
						 <option value='1'>1200</option>
						 <option value='2'>2400</option> 
						 <option value='3'>4800</option> 
						 <option value='4'>9600</option> 
						 <option value='5'>19200</option> 
						 <option value='6'>38400</option> 
						 <option value='7'>57600</option> 
						 <option value='8'>115200</option>
						 <option value='9'>230400</option>
					 </select> 
					 <label for='selDb2'>Data bit:</label> 
					 <select id='selDb2' name='databit' disabled='disabled'> 						 
						 <option>8</option>
						 <option>9</option>
					 </select> 
					 <label for='selParity2'>Parity:</label> 
					 <select id='selParity2' name='parity' disabled='disabled'> 
						 <option value='0'>NONE</option> 
						 <option value='1'>ODD</option> 
						 <option value='2'>EVEN</option> 
					 </select> 
					 <label for='selStop2'>Stop bit:</label> 
					 <select id='selStop2' name='stopbit' disabled='disabled'> 
					 	<option>1</option> 
					 	<option>2</option> 
					 </select> 
					 <label for='selFlow2'>Flow control:</label> 
					 <select id='selFlow2' name='flowcontrol' disabled='disabled'> 
						 <option value='0'>NONE</option> 
						 <option value='1'>CTS/RTS</option>
						 <option value='2'>RS-422</option> 
						 <option value='3'>RS-485</option>  
					 </select> 
					 <span class='red'>READ ONLY</span>
				 </div> 
				 <div> 
				 	<input type='submit' class='btn' value='Save Settings and Reboot'/> 
				 </div> 
			 </form> 
		 </div> 
		 <div id='tabs2' class='hide'> 		 
			 <h3>Digital I/O</h3>
			 <div class='io'> 
			 	<h3>On-board LED Status</h3> 
			 	<div>
					<ul> 
						<li>LED0							
							<span name='led' class='onboard-led led-off'></span>														
							<span name='ledset' class='do-led' pin='90'>
								<button name='ledset-btn' class='btn btn-on' pin='90' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 
						<li>LED1							
							<span name='led' class='onboard-led led-off'></span>							
							<span name='ledset' class='do-led' pin='91'>
								<button name='ledset-btn' class='btn btn-on' pin='91' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 						
					</ul>
				</div>
			</div>
			<div>
			 	<h3>Digital I/O Status</h3> 			 	
			 	<div class='io'>
					<ul> 
						<li>D0:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>														
							<span name='dout' class='do-led' size='10' pin='0'>
								<button name='dout-btn' class='btn btn-on' pin='0' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 
						<li>D1:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>														
							<span name='dout' class='do-led' size='9' pin='1'>
								<button name='dout-btn' class='btn btn-on' pin='1' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 
						<li>D2:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>							
							<span name='dout' class='do-led' size='8' pin='2'>
								<button name='dout-btn' class='btn btn-on' pin='2' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D3:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>							
							<span name='dout' class='do-led' pin='3'>
								<button name='dout-btn' class='btn btn-on' pin='3' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
					</ul>
				</div>
				<div class='io'>
					<ul>
						<li>D4:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='4'>
								<button name='dout-btn' class='btn btn-on' pin='4' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D5:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='5'>
								<button name='dout-btn' class='btn btn-on' pin='5' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D6:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='6'>
								<button name='dout-btn' class='btn btn-on' pin='6' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D7:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='7'>
								<button name='dout-btn' class='btn btn-on' pin='7' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
					</ul>
				</div>
				<div class='io'>
					<ul> 
						<li>D8:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-on'></span>
							<span name='dout' class='do-led' pin='8'>
								<button name='dout-btn' class='btn btn-on' pin='8' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 
						<li>D9:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='9'>
								<button name='dout-btn' class='btn btn-on' pin='9' onclick='postdata(this);'>On / Off</button>
							</span>
						</li> 
						<li>D10:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='10'>
								<button name='dout-btn' class='btn btn-on' pin='10' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D11:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='11'>
								<button name='dout-btn' class='btn btn-on' pin='11' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
					</ul>					
				</div> 
				<div class='io'>
					<ul>
						<li>D12:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='12'>
								<button name='dout-btn' class='btn btn-on' pin='12' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D13:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='13'>
								<button name='dout-btn' class='btn btn-on' pin='13' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D14:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='14'>
								<button name='dout-btn' class='btn btn-on' pin='14' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
						<li>D15:
							<span name='iodir' class='io-dir'></span>
							<span name='din' class='di-led di-off'></span>
							<span name='dout' class='do-led' pin='15'>
								<button name='dout-btn' class='btn btn-on' pin='15' onclick='postdata(this);'>On / Off</button>
							</span>
						</li>
					</ul>
				</div>
			</div>	
			<div class='info'>			 	
			 	<div>
				 	<ul id='diopage_info'>
					 	<li>
					 		<div style='width: 80px'>
					 			<span class='di-led di-on'></span>				 			
					 		</div>
					 		<div>					 						 		
						 		<b>Green LED: </b>The Green LED indicates [on-board LED] <b>'ON'</b> & Digital <b>input signal</b> status] <b>'High'</b> (On)
					 		</div>
					 	</li>
					 	<li>				 		
					 		<div style='width: 80px'>
					 			<span class='di-led dio-on'></span>				 			
					 		</div>
					 		<div>					 						 		
						 		<b>Blue LED: </b>The Blue LED indicates that the [Digital <b>output signal</b> status] is <b>'High'</b> (On)
						 	</div>
					 	</li>
					 	<li>
					 		<div style='width: 80px'>
					 			<span class='di-led di-off'></span>				 			
					 		</div>
					 		<div>					 		
						 		<b>Silver LED: </b>The Silver LED indicates that the [on-board LED] <b>'OFF'</b> & Digital <b>I/O signal</b> status] is <b>'Low'</b> (Off)
						 	</div>
					 	</li>
					 	<li>
					 		<div style='width: 80px'>				 		
						 		<span>
						 			<button class='btn btn-on'>OFF</button> 
						 			<button class='btn btn-off'>ON</button>
						 		</span>					 							 		
					 		</div>
					 		<div>				 		
						 		<b>Button: </b>The clickable <b>'ON/OFF' switch</b> for control the [on-board LED & Digital <b>output signal</b> status]
						 	</div>					 	
					 	</li>
					</ul>
				</div>				
			 </div>	
		 </div>
		 <div id='tabs3' class='hide'> 
			 <h3>ADC Status</h3>			 
			 <div> 
			 	 <h3>Analog Input Signal</h3> 
				 <div class='div-analog'> 
					 <label>A0</label> 
					 <div class='analog' style='padding:0px;'><strong name='ain' class='ain' style='width:0%;'></strong><span name='ainval'></span></div> 
					 <label>A1</label> 
					 <div class='analog' style='padding:0px;'><strong name='ain' class='ain' style='width:0%;'></strong><span name='ainval'></span></div> 
					 <label>A2</label> 
					 <div class='analog' style='padding:0px;'><strong name='ain' class='ain' style='width:0%;'></strong><span name='ainval'></span></div> 
					 <label>A3</label> 
					 <div class='analog' style='padding:0px;'><strong name='ain' class='ain' style='width:0%;'></strong><span name='ainval'></span></div> 
				</div> 
			 </div>
			 <div class='info'>			 	
			 	<div>
				 	<ul id='ainpage_info'>
					 	<li>
					 		<div>- <b>12-bit</b> A/D converters</div>
					 	</li>
					 	<li>
					 		<div>- Conversion range: 0 to 3.6V (<b>0 to 4095</b>)</div>
					 	</li>
					 	<li>
					 		<div>- 4-pin analog inputs (<b>A0 ~ A3</b>)</div>
					 	</li>
					</ul>
				</div>								
			 </div>		
		 </div> 
		 <div id='tabs4' class='hide'>  	 
			<h3>I/O Configuration</h3> 
						
			<div class='conf-menu'>			
				<div align='left'>				
				<input type='button' class='btn' value='IO Settings Factory Reset and Reboot' onclick='io_status_factory_reset();'>
				</div>
				<ul>						
					<li>						
						<span name='dstate' class='di-led di-off'></span>
						<label for='selDir'>D0</label>
						<select id='selDir' name='dir' pin='0' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						</select> 						
						<input type='text' id='txtAlias_d0' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='0' onclick='save_alias(this);'>
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D1</label>
						<select id='selDir' name='dir' pin='1' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d1' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>						
				 		<input type='button' class='btn' value='Save alias' pin='1' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D2</label>
						<select id='selDir' name='dir' pin='2' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d2' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>						
				 		<input type='button' class='btn' value='Save alias' pin='2' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D3</label>
						<select id='selDir' name='dir' pin='3' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d3' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>						
				 		<input type='button' class='btn' value='Save alias' pin='3' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D4</label>
						<select id='selDir' name='dir' pin='4' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d4' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>						
				 		<input type='button' class='btn' value='Save alias' pin='4' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D5</label>
						<select id='selDir' name='dir' pin='5' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d5' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>						
				 		<input type='button' class='btn' value='Save alias' pin='5' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D6</label>
						<select id='selDir' name='dir' pin='6' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d6' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='6' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D7</label>
						<select id='selDir' name='dir' pin='7' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d7' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='7' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D8</label>
						<select id='selDir' name='dir' pin='8' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d8' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='8' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D9</label>
						<select id='selDir' name='dir' pin='9' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d9' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='9' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D10</label>
						<select id='selDir' name='dir' pin='10' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d10' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>	
				 		<input type='button' class='btn' value='Save alias' pin='10' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D11</label>
						<select id='selDir' name='dir' pin='11' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d11' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='11' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D12</label>
						<select id='selDir' name='dir' pin='12' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d12' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='12' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D13</label>
						<select id='selDir' name='dir' pin='13' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d13' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='13' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D14</label>
						<select id='selDir' name='dir' pin='14' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d14' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='14' onclick='save_alias(this);'> 
					</li>
					<li>
						<span name='dstate' class='di-led di-off'></span>							
						<label for='selDir'>D15</label>
						<select id='selDir' name='dir' pin='15' onchange='dir_change(this);'> 
							 <option value='0'>NotUsed</option> 
							 <option value='1'>Input</option>
							 <option value='2'>Output</option> 							 
						 </select> 
						<input type='text' id='txtAlias_d15' name='alias' size='25' maxlength='25' value='' onkeyup='len_chk(this);'>
				 		<input type='button' class='btn' value='Save alias' pin='15' onclick='save_alias(this);'> 
					</li>					
				</ul>				
			</div>		
		</div>		
		 <div id='tabs5' class='hide'> 
			 <h3>Serial Data</h3> 
			 <div class='ipt'> 
				 <p><label for='txtTx'>Data to send:</label><input id='txtTx' type='text' name='txdata' value='' size='32' /><input type='button' class='btn' value='Send' onclick='send_to_rs232();'/></p> 
				 <p><label for='txtRx'>Received data:</label><textarea id='txtRx' name='rxdata' cols='30' rows='5' disabled='disabled'></textarea><input type='button' class='btn' value='Clear' onclick='clear_textarea();'/></p> 
			 </div> 
		 </div> 
	 </div> 
	 <div style='margin:5px 5px; clear:both' > 
	 	<center>
	 	&copy;Copyright 2014 WIZnet Co., Ltd.		
		</center>
	 </div> 
	 <script type='text/javascript' src='widget.cgi'></script>	
 </body> 
 </html>